<template>
  <div>
    <v-card class="mb-4">
      <v-card-title>{{ t('language.title') }}</v-card-title>
      <v-card-text>
        <v-select
          hide-details
          :items="languages"
          :model-value="systemState.state.language"
          @update:model-value="updateLanguage"
        />
      </v-card-text>
    </v-card>

    <v-card>
      <v-card-title>{{ t('theme.title') }}</v-card-title>
      <v-card-text>
        <v-radio-group
          hide-details
          inline
          :model-value="systemState.state.theme"
          @update:model-value="updateTheme"
        >
          <v-radio class="mr-3" :label="t('theme.light')" value="light" />
          <v-radio class="mr-3" :label="t('theme.dark')" value="dark" />
          <v-radio class="mr-3" :label="t('theme.system')" value="system" />
        </v-radio-group>
      </v-card-text>
    </v-card>
  </div>
</template>

<script lang="ts" setup>
import type { AvailableTheme, SupportedLanguage } from '~shared/constants'
import { useI18n } from 'vue-i18n'
import { systemState } from 'global-state'

const { t } = useI18n()

function updateLanguage(value: SupportedLanguage) {
  systemState.set('language', value)
}

function updateTheme(value: AvailableTheme | null) {
  if (!value) return
  systemState.set('theme', value)
}

const languages = [
  { title: '简体中文', value: 'zhHans' },
  { title: 'English', value: 'en' }
]
</script>

<i18n>
{
  "zhHans": {
    "language": {
      "title": "语言设置",
      "selectLabel": "选择语言"
    },
    "theme": {
      "title": "外观设置",
      "light": "浅色",
      "dark": "深色",
      "system": "跟随系统"
    }
  },
  "en": {
    "language": {
      "title": "Language Settings",
      "selectLabel": "Select Language"
    },
    "theme": {
      "title": "Appearance Settings",
      "light": "Light",
      "dark": "Dark",
      "system": "Follow System"
    }
  }
}
</i18n>
